import { View, Text, Image, RadioGroup, ScrollView, StickySection, StickyHeader, ListView } from "@tarojs/components";
import Taro, { useDidShow, useLoad } from "@tarojs/taro";
import { memo, useEffect, useState } from "react";
import { Empty, NavBar } from "@nutui/nutui-react-taro";
import ListItem from "./components/list-item";
import useNavInfo from "../../hooks/useNavInfo";
import { empty01, iconRightFill, iconRightWhiteMin, paihangbang, studyTotlaBg } from "../../assets/files";
import { userCard, userRank, userTotal } from "../../api/total";
import { ArrowLeft } from '@nutui/icons-react-taro'
import { secondsToMinutes } from "../../common/_";
import ShareModal from "./components/share-modal";
import { getStore } from "../../utils/localStore";
import LoginModal from "../../components/login/index.jsx";
import "./index.scss";

const StudyTotal = () => {

  const { statusBarHeight, screenWidth } = useNavInfo();
  const [loginVisible, setLoginVisible] = useState(false);

  useDidShow(() => {
    getUserRank()
    getUserTotal()
    getUserCard()
  })

  const [shareVisible, setShareVisible] = useState(false)


  const [myStudyInfo, setMyStudyInfo] = useState([])
  async function getUserTotal() {
    const { data, success } = await userTotal({})
    if (success) {
      setMyStudyInfo(data)
    }
  }

  const [cardInfo, setCardInfo] = useState({})
  async function getUserCard() {
    const { data, success } = await userCard({})
    if (success) {
      setCardInfo(data)
    }
  }



  const [allRank, setAllRank] = useState([])
  const [myRank, setMyRank] = useState([])
  async function getUserRank() {
    const { data, success } = await userRank({})
    if (success) {
      setAllRank(data.allRank)
      setMyRank(data.myRank)
    }

  }

  function _handleback() {
    Taro.navigateBack({
      delta: 1
    })
  }


  function showShareImg() {
    if (!getStore("token")) {
      setLoginVisible(true);
      return
    }

    // if (cardInfo.list.length === 0) {
    //   Taro.showToast({
    //     title: '暂无学习成就，请先进行测试',
    //     icon: 'none'
    //   })
    //   return
    // }

    setShareVisible(true)
  }

  return (
    <View className="mainWrap">

      <View className="homebg"></View>
      <NavBar
        style={{ backgroundColor: "transparent", position: 'fixed', left: 0, top: statusBarHeight }}
      >
        <span>学习统计</span>
      </NavBar>

      <Image className="studySty" src={studyTotlaBg} />
      <View className="boxWrap" style={{ marginTop: 170+statusBarHeight }}>
        <View className="fooTitmWrap" onClick={() => showShareImg()}>
          <View className="fooWrap">
            <Text className="xuexiTit">学习总时长</Text>
            <View className="seeShare">
              <Text className="seeShareText">学习成就查看</Text>
              <Image src={iconRightWhiteMin} className="iconRightFillSty" />
            </View>
          </View>
          <View className="xiapshi">
            <Text className="timeVal">{secondsToMinutes(myStudyInfo.videoWatchDuration)}</Text>
            <Text className="geeSub">已学习视频  {myStudyInfo.videoWatchTotal || 0}个</Text>
          </View>

          {/* <View className="fooWrap">
            <Text className="geeSub">已学习视频  {myStudyInfo.videoWatchTotal}个</Text>
            <Text className="geeSub">已浏览资讯  {myStudyInfo.readTotal}篇</Text>
          </View> */}
        </View>
      </View>

      <View className="boxWrap">
        <View className="fooTitmWrap">
          <View className="fooWrap">
            <Text className="xuexiTit">今日学习时长</Text>
          </View>
          <View className="xiapshi">
            <Text className="timeVal">{secondsToMinutes(myStudyInfo.videoTodayWatchDuration)}</Text>
            <Text className="geeSub">已学习视频  {myStudyInfo.videoTodayWatchTotal || 0}个</Text>
          </View>

          {/* <View className="fooWrap">
            <Text className="geeSub">已学习视频  {myStudyInfo.videoTodayWatchTotal}个</Text>
            <Text className="geeSub">已浏览资讯  {myStudyInfo.readTodayTotal}篇</Text>
          </View> */}
        </View>
      </View>

      <View className="boxWrap">
        <View className="fooTitmWrap">
          <View className="fooWrap">
            <Text className="xuexiTit">测试次数</Text>
          </View>
          <View className="xiapshi">
            <Text className="timeVal">{myStudyInfo.examTotal || 0}次</Text>
            <Text className="geeSub">测试正确率  {myStudyInfo.rightRate || 0}%</Text>
          </View>

          {/* <View className="fooWrap">
            <Text className="geeSub">测试最高分  {myStudyInfo.maxScore}分</Text>
            <Text className="geeSub">测试正确率  {myStudyInfo.rightRate}</Text>
          </View> */}
        </View>
      </View>


      <View className="boxWrap" style={{ paddingTop: 0, paddingBottom: '60px', }}>
        <View className="pWrap">
          <Image className="paImg" src={paihangbang} />
        </View>
        <View>
          {
            allRank.length > 0 ? allRank.map((v, i) => {
              return <ListItem index={i} item={v} />
            })
              :
              <Empty
                description="无数据"
                image={
                  <img
                    src={empty01}
                    alt=""
                  />
                }
              />
          }
        </View>
      </View>

      <View className="phbWrap" style={{ width: screenWidth - 48, left: 12 }}>
        <View className="pw">
          <Text className="pwText">我的排行：</Text>
          <Text className="pwText">{myRank.rankSort || '未上榜'}</Text>
        </View>

        <View className="pw">
          <Text className="pwText">我的学习时长：</Text>
          <Text className="pwText">{secondsToMinutes(myRank.watchDuration)}</Text>
        </View>
      </View>

      <ShareModal
        visible={shareVisible}
        info={cardInfo}
        closeFn={() => {
          setShareVisible(false)
        }}
      />

      <LoginModal
        visible={loginVisible}
        close={() => {
          setLoginVisible(false);
          // setUserInfo(getStore("userInfo"));
        }}
      />

    </View>
  );
}

export default StudyTotal;
